<template>
  <div id="app">
    <div class="main-container">
      <div class="order-info">
        <div class="time-wrapper">
          <span>请在</span>
          <span class="time">{{minutes}}分{{seconds}}秒</span>
          <span>内完成支付,否则订单取消</span>
        </div>
        <div class="dash-line"></div>
        <div class="order-title">
          {{orderNo.ticket}}_{{orderNo.time}}
        </div>
        <div class="order-id">订单号:4008544563028999</div>
      </div>
      <div class="price-wrapper">
        <span>支付金额</span>
        <span class="pay-amount">￥{{orderNo.totalprice}}</span>
      </div>
      <div class="channel-wrapper">
        <div class="channel-tip">选择支付平台</div>
        <div class="channels">
          <div class="pay-channels" @click="tanchu(1)">
            <img src="./images/pay2.jpg" alt="" />
          </div>
          <div class="pay-channels" @click="tanchu(2)">
            <img src="./images/pay3.jpg" alt="" />
          </div>
          <el-dialog
            title="提示"
            :visible.sync="centerDialogVisible"
            width="30%"
            center
          >
            <!-- <img :src="this.wxOrZfb===1 ? this.payUrl.wx :this.payUrl.zfb " alt=""> -->
            <div style="width:100%">
              <!-- <img :src="this.wxOrZfb===2 ? this.payUrl.wx :this.payUrl.zfb " alt="" style="margin-left:60px; width:200px; height:200px;"> -->
              <img v-show="this.wxOrZfb===2" src="./images/paywx.jpg" alt="" style="display:block; margin:0 auto; width:200px; height:200px;">
              <img v-show="this.wxOrZfb===1" src="./images/payzfb.jpg" alt="" style="display:block; margin:0 auto; width:200px; height:200px;">
            </div>
            <span slot="footer" class="dialog-footer">
              <el-button @click="centerDialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="centerDialogVisible = false"
                >确 定</el-button
              >
            </span>
          </el-dialog>
        </div>
      </div>
      <!-- <div class="button" >下一步</div> -->
      <router-link class="button" to="/paysuccess">下一步</router-link>
      <div class="union-form" id="unionForm">
        <form id="pay_form"></form>
      </div>
    </div>
  </div>
</template>

<script>
import QRCode from "qrcode";
export default {
  name: "Pay",
  data() {
    return {
      orderNo:{},
      payStatus: "",
      centerDialogVisible: false,
      wxOrZfb:1,
      payUrl:{wx:'./pay/images/paywx.jpg',zfb:'./images/payzfb.jpg'},
      minutes:10,
      seconds:0
    };
  },
  beforeMount(){
    console.log(this.$route.query)
     const orderNo =JSON.parse(this.$route.query.orderNo) 
     
    
        this.orderNo = orderNo
      
  },
  mounted() {
  
    this.add()
    console.log(this.orderNo)
  },

  methods: {
    tanchu(index){
      console.log('pay');
      this.centerDialogVisible = true
      this.wxOrZfb = index
    },
    num:function (n){
      return n < 10 ? '0' + n : '' + n
    },
    add(){
      var _this = this
      var time = window.setInterval(function(){
        if (_this.seconds === 0 && _this.minutes !== 0){
          _this.seconds = 59
          _this.minutes -= 1
        } else if (_this.minutes === 0 && _this.seconds === 0){
          _this.seconds = 0
          widow.clearInterval(time)
        }else{
          _this.seconds -= 1
        }
      },1000)
    },
    
  },
  watch:{
    second:{
      handler (newVal){
        this.num(newVal)
      }
    },
    minute:{
      handler (newVal){
        this.num(newVal)
      }
    }
  },
  computed:{
    second:function(){
      return this.num(this.seconds)
    },
    minute:function (){
      return this.num(this.minutes)
    }
  }
};
</script>

<style scoped>
.main-container {
  max-width: 1160px;
  margin: 100px auto;
  padding: 40px 40px 50px;
  box-sizing: border-box;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 2px 0 #cbd0d8;
  border-radius: 4px;
}
.order-info {
  position: relative;
  padding: 20px;
  background: #f4f5f7;
}
.order-info .time-wrapper {
  white-space: nowrap;
  /* overflow: hidden; */
  text-overflow: ellipsis;
  font-size: 0;
  color: #222;
  letter-spacing: 0;
  line-height: 18px;
}
.order-info .time-wrapper .time {
  color: #fb7299;
}
.order-info .time-wrapper span {
  display: inline-block;
  vertical-align: top;
  font-size: 18px;
}
.dash-line {
  position: absolute;
  top: 58px;
  left: 20px;
  right: 20px;
  border: 1px dashed #e7e7e7;
  box-sizing: content-box;
}
.order-info .order-title {
  margin-top: 42px;
  font-size: 14px;
  color: #222;
  letter-spacing: 0;
  line-height: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.order-info .order-id {
  margin-top: 15px;
  font-size: 14px;
  color: #222;
  letter-spacing: 0;
  line-height: 14px;
}
.price-wrapper {
  margin-top: 10px;
}
.price-wrapper .pay-amount {
  font-size: 22px;
  color: #ff66a2;
  letter-spacing: 0;
  line-height: 22px;
}
.channel-wrapper {
  margin-top: 50px;
  overflow: hidden;
}
.channel-wrapper .channel-tip {
  font-size: 18px;
  color: #222;
  letter-spacing: 0;
  line-height: 18px;
}
.channel-wrapper .channels {
  margin-top: 20px;
}
.channel-wrapper .pay-channels {
  display: inline-block;
  width: 214px;
  height: 64px;
  text-align: center;
  margin-bottom: 15px;
  margin-right: 20px;
  border: 1px solid #e7e7e7;
  box-sizing: border-box;
  border-radius: 4px;
  cursor: pointer;
  padding-top: 15px;
}
.channel-wrapper .pay-channels.selected {
  position: relative;
  border: 1px solid #fb7299;
  border-radius: 4px;
}
.channel-wrapper .pay-channel .channel-content {
  display: table;
  margin: 0 auto;
  height: 100%;
  overflow: hidden;
}
.button {
  width: 240px;
  height: 50px;
  margin-top: 20px;
  float: right;
  text-align: center;
  background-image: linear-gradient(-48deg, #fe8547, #ff6a9c);
  box-shadow: 0 3px 4px 0 #fdb8cc;
  border-radius: 4px;
  font-size: 18px;
  color: #fff;
  letter-spacing: 0;
  line-height: 50px;
  cursor: pointer;
}
</style>
